<template>
  <div class="largeScreen-4">
    <div class="largeScreen-title">
      <img style="width: 25px;" src="https://api.gygsjcpt.cn/pcimg/largeScreen-bg4-icon3.jpg" alt=""> 今日订单发货跟踪
    </div>
    <div class="largeScreen-info">
      <div>今日订单数 ： <span style="color: #00ecff;font-weight: 700;">{{ today_info.num }}</span> </div>
      <div>今日销售额 ： <span style="color: #00ecff;font-weight: 700;">{{ today_info.price }}</span> </div>
      <div class="reBack"  @click="reBack" v-if="isDetail">返回</div>
    </div>
    <div id="largeScreen-4_1" style="width: 100%;height:550%;"></div>
    <div id="largeScreen-4_2" style="width: 100%;height:550%;"></div>

    <!-- <div class="toDetail" @click="toDetail"></div> -->
    <!-- <div class="reBack1" @click="reBack"></div>
    <div class="reBack2" @click="reBack"></div> -->
  </div>
</template>


<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script>
import * as echarts from 'echarts';
import jxmap from './map.json'
import jxmap2 from './map1.json'
export default {
    components: {},
    props:['today_info'],
    data() {
        return {
          isDetail:false,
            data: [{
                     coords: [
                        [115.992151, 28.676493],
                     [116.38, 28.48],   // 初始点经纬度
                    ],
                     label: {
                        start: '南昌市',
                         end: '南昌市'
                     }
                 }],
            nan2: [116.38, 28.48]      
        }
    },
    methods: {
      async change_com() {
            await this.getIndexData1(localStorage.getItem('change_id'))
            this.init1();
        },
      async toDetail(){
        document.querySelector('#largeScreen-4_1').style.display = 'none'
        document.querySelector('#largeScreen-4_2').style.display = 'block'
        await this.getIndexData2();
        this.init2();
        this.isDetail = true
      },
      async reBack(){
        document.querySelector('#largeScreen-4_1').style.display = 'block'
         document.querySelector('#largeScreen-4_2').style.display = 'none'
        await this.getIndexData1();
        this.init1();
        this.isDetail = false
      },
        init1() {
            var myChart = echarts.init(document.getElementById('largeScreen-4_1'));
            // 发光的小圈的经纬度，数组的话就是该经纬度的小圈使用默认样式，对象可自定义样式

            var point_circle = [
  {
    value: [115.992151, 28.676493],
    label: {
      name: '南昌市'
    },
    itemStyle: {
      color: 'red',
    },
  },
  {
    value: [116.38, 28.48],
    label: {
      name: ''
    },
    itemStyle: {
      color: 'red',
    },
  },
  {
    value: [113.93, 27.61],
    label: {
      name: '萍乡市'
    },
  },
  {
    value: [115.67, 29.51],
    label: {
      name: '九江市'
    },
  },
  {
    value: [114.81, 27.72],
    label: {
      name: '新余市'
    },
  },
  {
    value: [117.28, 29.09],
    label: {
      name: '景德镇市'
    },
  },
  {
    value: [117.12, 28.10],
    label: {
      name: '鹰潭市'
    },
  },
  {
    value: [115.44, 25.67],
    label: {
      name: '赣州市'
    },
  },
  {
    value: [115.05, 26.88],
    label: {
      name: '吉安市'
    },
  },
  {
    value: [114.891136, 28.3446596717],
    label: {
      name: '宜春市'
    },
  },
  {
    value: [116.45, 27.79],
    label: {
      name: '抚州市'
    },
     },
  {
     value: [117.92, 28.42],
    label: {
      name: '上饶市'
    },
  }
];

        myChart.on('click', function (e) {
        if(e.name == '南昌市')
          todetail()
        });
                echarts.registerMap('china', jxmap);
                const option = {

                    //  tooltip 该版本需在 option中定义才开启
                    //  子图层可自定义内容
                    tooltip: {
                        //格式化内容，返回为空，地图组件不起作用，得在地图组件重新定义
                        formatter: () => '',
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    // backgroundColor: '#013954',
                    geo: {
                      regions: [{
            name: '南海诸岛',
            value: 0,
            itemStyle: {
                normal: {
                    opacity: 0,
                    label: {
                        show: false
                    }
                }
            }
        }],
                        map: 'china',
                        zoom: 2.3,
                    roam: true,
                    layoutCenter: ['115%', '100%'],
                        // 如果宽高比大于 1 则宽度为 100，如果小于 1 则高度为 100，保证了不超过 100x100 的区域
                        layoutSize: '100%',
                        itemStyle: {
                            borderWidth: 1,
                            areaColor: {
                                type: 'radial',
                                x: 0.5,
                                y: 0.5,
                                r: 0.5,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: 'rgba(147, 235, 248, 0)', // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(147, 235, 248, .2)', // 100% 处的颜色
                                    },
                                ],
                            },
                            shadowColor: 'rgba(128, 217, 248, 1)',
                            shadowOffsetX: -2,
                            shadowOffsetY: 2,
                            shadowBlur: 10,
                            borderColor: 'rgba(147, 235, 248, 1)',
                        },
                        tooltip: {
                            formatter: () => ''
                        },
                        emphasis: {   //地图高亮
                            itemStyle: {
                                color: '#93EBF8'
                            }
                        }
                    },
                    series: [
                        {
                            type: 'lines',
                            zlevel: 2,
                            effect: {
                                show: true,
                                symbolSize: 5,
                                color: '#E4AA0C',
                                symbol: 'arrow',
                            },
                            lineStyle: {
                                color: '#F56828',
                                width: 1, //线条宽度
                                curveness: 0.3,
                            },
              //               tooltip: {
              //                   formatter({ data }) {
              //                       return `流向走向如下：<br />
              // 起点：${data.label.start ?  data.label.start : ' '}<br />
              // 终点：${data.label.end ? data.label.end : ' '}
              // `
              //                   },
              //                   backgroundColor: 'rgba(245,108,45,0.5)',
              //               },
                            data: this.data,
                        },
                        {
                            type: 'effectScatter',
                            coordinateSystem: 'geo',
                            rippleEffect: {
                                number: 2,
                                scale: 3,
                                brushType: 'stroke',
                            },
                            itemStyle: {
                                color: '#F56828',
                            },
                            tooltip: {
                                formatter({ data }) {
                                    return `地点位于：${data.label.name}`
                                },
                                backgroundColor: 'rgba(232,85,160,0.5)',
                            },
                            label: {
                                show: true,
                                offset: [40, 0],
                                color: '#F56828',
                                formatter({ data }) {
                                    return `${data.label.name}`
                                }
                            },
                            data: point_circle,
                        }, //地图线的动画效果,
                    ],
                };
             var todetail = () =>{
              this.toDetail()
             }
            myChart.setOption(option);
        },
        init2() {
            var myChart = echarts.init(document.getElementById('largeScreen-4_2'));
            // 发光的小圈的经纬度，数组的话就是该经纬度的小圈使用默认样式，对象可自定义样式

            var point_circle = [
  {
    value: [115.87, 28.67],
    label: {
      name: '西湖区'
    },
    itemStyle: {
      color: 'red',
    },
  },
  {
    value: [115.77, 28.57],
    label: {
      name: '红谷滩新区'
    },
    itemStyle: {
    },
  },
  {
    value: [115.9, 28.70],
    label: {
      name: '东湖区'
    },
  },
  {
    value: [115.93, 28.43],
    label: {
      name: '南昌县'
    },
  },
  {
    value: [115.92, 28.63],
    label: {
      name: '青云谱区'
    },
  },
  {
    value: [115.73, 28.78],
    label: {
      name: '湾里区'
    },
  },
  {
    value: [115.85, 28.78],
    label: {
      name: '青山湖区'
    },
  },
  {
    value: [115.92, 28.97],
    label: {
      name: '新建区'
    },
  },
  {
    value: [115.55, 28.85],
    label: {
      name: '安义县'
    },
  },
  {
    value: [116.27, 28.37],
    label: {
      name: '进贤县'
    },
  },

];



           
                echarts.registerMap('china', jxmap2);
                const option = {
                    //  tooltip 该版本需在 option中定义才开启
                    //  子图层可自定义内容
                    tooltip: {
                        //格式化内容，返回为空，地图组件不起作用，得在地图组件重新定义
                        formatter: () => '',
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    // backgroundColor: '#013954',
                    geo: {
                      regions: [{
            name: '南海诸岛',
            value: 0,
            itemStyle: {
                normal: {
                    opacity: 0,
                    label: {
                        show: false
                    }
                }
            }
        }],
                        map: 'china',
                        zoom: 11,
                    roam: true,
                    layoutCenter: ['440%', '480%'],
                        // 如果宽高比大于 1 则宽度为 100，如果小于 1 则高度为 100，保证了不超过 100x100 的区域
                        layoutSize: '100%',
                        itemStyle: {
                            borderWidth: 1,
                            areaColor: {
                                type: 'radial',
                                x: 0.5,
                                y: 0.5,
                                r: 0.5,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: 'rgba(147, 235, 248, 0)', // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(147, 235, 248, .2)', // 100% 处的颜色
                                    },
                                ],
                            },
                            shadowColor: 'rgba(128, 217, 248, 1)',
                            shadowOffsetX: -2,
                            shadowOffsetY: 2,
                            shadowBlur: 10,
                            borderColor: 'rgba(147, 235, 248, 1)',
                        },
                        tooltip: {
                            formatter: () => ''
                        },
                        emphasis: {   //地图高亮
                            itemStyle: {
                                color: '#93EBF8'
                            }
                        }
                    },
                    series: [
                        {
                            type: 'lines',
                            zlevel: 5,
                            effect: {
                                show: true,
                                symbolSize: 5,
                                color: '#E4AA0C',
                                symbol: 'arrow',
                            },
                            lineStyle: {
                                color: '#F56828',
                                width: 1, //线条宽度
                                curveness: 0.3,
                            },
              //               tooltip: {
              //                   formatter({ data }) {
              //                       return `流向走向如下：<br />
              // 起点：${data.label.start ?  data.label.start : ' '}<br />
              // 终点：${data.label.end ? data.label.end : ' '}
              // `
              //                   },
              //                   backgroundColor: 'rgba(245,108,45,0.5)',
              //               },
                            data: this.data,
                        },
                        {
                            type: 'effectScatter',
                            coordinateSystem: 'geo',
                            rippleEffect: {
                                number: 2,
                                scale: 3,
                                brushType: 'stroke',
                            },
                            itemStyle: {
                                color: '#F56828',
                            },
                            tooltip: {
                                formatter({ data }) {
                                    return `地点位于：${data.label.name}`
                                },
                                backgroundColor: 'rgba(232,85,160,0.5)',
                            },
                            label:{
          show:true,
          offset:[40,0],
          color:'#F56828',
          formatter({data}){
              if(data.label.name == '红谷滩新区' || data.label.name == '湾里区'){
return '{a|' + data.label.name+ '}'
              }else if(data.label.name == '东湖区'){
                  return '{b|' + data.label.name+ '}'
              }else{

            return `${data.label.name}`
              }
          },

          rich: {
                a: {
                    // 自定义样式
                    padding:[0,160,0,0]
                },
                b:{
                    padding:[-30,20,0,0]
                }
            },

        },
                            data: point_circle,
                        }, //地图线的动画效果,
                    ],
                };
                myChart.setOption(option);

        },
        async getIndexData1(id='') {
            
            const res = await this.$axios.get(`https://api.gygsjcpt.cn/api/visualization1/data_10?company_id=${id}`)
            this.data = res.data.data
            this.data.map(v=>{
                if(v.lable.start == v.lable.end){
                    v.lable.end = ''
                    v.coords[1] = this.nan2
                }
            })
            
        },
        async getIndexData2() {
            
            const res = await this.$axios.get('https://api.gygsjcpt.cn/api/visualization2/data_13')
            this.data = res.data.data

            
        },
        // formatter: function (num) {
        //     return num.toFixed(2) //小数点后几位，数字就是几小数点后几位
        // },
        
    },
    async mounted() {
        await this.getIndexData1(localStorage.getItem('change_id'));
        this.init1();
    },
    watch: {

    }
};
</script>

<style lang="scss" scoped>
.largeScreen-4 {
  position: relative;

  .largeScreen-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0px;
    color: #fff;

  }

  .largeScreen-info {
    position: absolute;
    left: 0px;
    top: 0px;
    color: #fff;

  }

  .toDetail {
    position: absolute;
    width: 50%;
    height: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 99;
  }
  .reBack{
    background: linear-gradient(to bottom, #00000040 0%, #00bfff50 100%);
    cursor: pointer;
    height: 40px;
    width: 120px;
    display: grid;
    place-content: center;
    margin-top: 10px;
    z-index: 999;
    position: absolute;
  }
  .reBack1 {
    position: absolute;
    width: 10%;
    height: 100%;
    right: 0;
    top: 0;
    z-index: 98;
  }

  .reBack2 {
    position: absolute;
    width: 10%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 98;
  }
}
</style>